<!-- 收藏夹 -->
<template>
    <Menu :dark="true"></Menu>
    <div class="container page-container">
        <!-- 展示图 -->
        <div class="banner">
            <el-image class="banner-image" :src="image2" fit="cover"></el-image>
            <p>收藏夹</p>
        </div>
        <!-- 收藏内容 -->
        <div class="sort" v-for="item in websiteList" :key="item.type">
            <!-- 顶部 -->
            <el-row class="sort-top" type="flex">
                <svgIcon iconName="icon-fenlei"/>
                <p>{{ item.typeName }}</p>
            </el-row>
            <!-- 内容 -->
            <el-row class="sort-bottom">
                <el-col class="main-item" :sm="12" :md="8" :lg="6" v-for="subItem in item.child" :key="subItem.id" @click="goWebsite(subItem)">
                    <div class="main-card">
                        <!-- 左侧封面 -->
                        <div class="main-image">
                            <el-image class="el-image" :src="subItem.cover" fit="cover"></el-image>
                        </div>
                        <!-- 右侧内容 -->
                        <div class="content">
                            <p class="sle">{{ subItem.name }}</p>
                            <p class="tle">{{ subItem.desc }}</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <Footer></Footer>
</template>

<script setup>
import Menu from '@/layout/components/menu/index-menu.vue';
import Footer from '@/layout/components/footer/footer.vue';
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import { systemApi } from '@/api/system/system-api';

const image = ref('https://s21.ax1x.com/2024/04/06/pFqmbHx.jpg');
import image2 from '@/assets/images/login/login-bg.jpg';

// ========================= 实列挂载之前调用 =========================
// 数据初始化
onBeforeMount(() => {
    getFavoriteList();
});

// ========================= 获取数据 =========================
const websiteList = ref([]);
async function getFavoriteList() {
    try {
        let conditions = {
            params: {
                name: '',
                state: true
            },
        };
        const res = await systemApi.favoriteList(conditions);
        if(res.meta.status !== 200) throw new Error(res.meta.msg);
        websiteList.value = setDataSort(res.data.data);
    } catch (e) {
        console.error(e)
    }
};
// 数据分类
function setDataSort(data) {
    let newobj = {}; 
    let sortArr = data.reduce((preVal, curVal) => {
        newobj[curVal.type] ? '' : newobj[curVal.type] = preVal.push({
            type: curVal.type,
            typeName: curVal.typeName
        }); 
        return preVal 
    }, []);
    sortArr.forEach(item => {
        let childArr = [];
        data.forEach(subItem => {
            if(item.type === subItem.type) {
                childArr.push(subItem);
                item.child = childArr;
            };
        });
    });
    return sortArr;
};

// ========================= 跳转网址 =========================
function goWebsite(item) {
    window.open(item.url, "_blank");
};
</script>

<style lang="scss" scoped>
    @import '@/theme/public.scss';
    @import '@/theme/animations.scss';
    @import './favorites.scss';
</style>